<?php

/**
 * hello 网站欢迎页面模板(含搜索)
 *
 * @package custom
 */
ini_set('opcache.revalidate_freq', 0);
if (!defined('__TYPECHO_ROOT_DIR__'))
    exit;
$today = getBingToday();
$url = $today['url'] ? $today['url'] : $today['urlstr'];
?>
<!DOCTYPE HTML>
<html lang="zh-cn">

    <head><?php $this->need('header.php'); ?></head>

    <body class="bg-tran">

        <div class="container" style="padding:15px;">
            <div class="columns">
                <div class="column col-12" style="margin:20px 0 40px 0;">
                    <form class="d-flex a-center" id="search" method="post" action="<?php $this->options->siteUrl(); ?>"
                        role="search">
                        <div class="has-icon-left f1">
                            <input id="s" name="s" onkeyup="searchKeyChange(this.value)"
                                class="form-input search-input input-lg" type="text" placeholder="" />
                            <i class="form-icon icon icon-search" style="margin:0 20px;"></i>
                        </div>
                        <button disabled="disabled" type="submit" class="btn btn-search btn-lg">搜索</button>
                    </form>
                </div>
                <div class="column col-12 cont" style="margin-bottom:10px;">
                    <?php $this->content(); ?>
                </div>
                <div class="column col-4 col-sm-12">
                    <div class="text-center m-2">
                        <img style="width:100px;" src="<?php $this->options->themeUrl('static/images/ba.png'); ?>" />
                        <div class="mt-2 text-bold">
                            <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">辽ICP备13014013号</a>
                        </div>
                        <div class="mt-2">
                            本站是正经网站
                            <br />(已备案)
                        </div>
                    </div>
                </div>
                <div class="column col-4 col-sm-12">
                    <div class="text-center m-2">
                        <img style="width:100px;"
                            src="<?php $this->options->themeUrl('static/images/multiple-devices.png'); ?>" />
                        <div class="mt-1 text-bold">
                            自适应浏览
                        </div>
                        <div class="mt-2">
                            支持移动设备<br />(包括iPad)
                        </div>
                    </div>
                </div>
                <div class="column col-4 col-sm-12">
                    <div class="text-center m-2">
                        <img style="width:100px;" src="<?php $this->options->themeUrl('static/images/theme.png'); ?>" />
                        <div class="mt-1 text-bold">
                            自动切换主题
                        </div>
                        <div class="mt-2">
                            支持light/night自动切换<br />(支持Windows和MacOS)
                        </div>
                    </div>
                </div>
            </div>

            <script>
                (() => {
                    const parent = window.parent.length
                    if (parent === 0) location.href = '/'

                    window.theme = getSystemTheme()
                    document.body.setAttribute('data-theme', getSystemTheme());
                    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
                        const newTheme = event.matches ? 'dark' : 'light';
                        document.body.setAttribute('data-theme', newTheme);
                    });
                })()

                function getSystemTheme() {
                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                        return 'dark';
                    } else {
                        return 'light';
                    }
                }

                function searchKeyChange(val) {
                    let btn = document.querySelector('.btn-search')
                    if (!btn) return
                    if (val === '') {
                        btn.setAttribute('disabled', 'disabled')
                    } else {
                        btn.removeAttribute('disabled')
                    }
                }
            </script>
    </body>

</html>